<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="2">
          FileName:
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入导出的文件名称" prefix-icon="el-icon-document" v-model="fileName"></el-input>
        </el-col>
        <el-col>
          <el-button type="primary" @click="exportExcel">导出选中的表格</el-button>
        </el-col>
      </el-row>
      <el-table ref="multipleTable" :data="tableList" border id="selectTable" @select="saveSelectList">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="Id" prop="serialNumber" width="100px"></el-table-column>
        <el-table-column label="Title" prop="title"></el-table-column>
        <el-table-column label="Author" width="100px">
          <template slot-scope="{row}">
            <el-tag>{{row.author}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Readings" prop="readings" width="100px"></el-table-column>
        <el-table-column label="Date" prop="date" width="120px"></el-table-column>
      </el-table>
      <el-table :data="selectList" id="outTable" style="height: 0;width: 0;border: none;">
        <el-table-column label="Id" prop="serialNumber"></el-table-column>
        <el-table-column label="Title" prop="title"></el-table-column>
        <el-table-column label="Author" prop="author"></el-table-column>
        <el-table-column label="Readings" prop="readings"></el-table-column>
        <el-table-column label="Date" prop="date"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      tableList: [],
      fileName: 'Excel',
      selectList: [],
      online: {}
    }
  },
  methods: {
    async getTableList() {
      if(!this.$store.state.method) {
        this.online.method = false
      }else {
        this.online.method = true
      }
      const res = await this.$http.get('edit/article', { params: this.online })
      res.response.forEach(item => {
        if(!this.online.method) {
          item.date = item.date.$date.split('T')[0]
          return
        }
        item.date = item.date.split('T')[0]
      })
      this.tableList = res.response
    },
    saveSelectList(v) {
      this.selectList = v
    },
    exportExcel() {
      if(this.selectList.length === 0) return this.$message({ type: 'warning', message: '请先选择需要导出的表格项', duration: 2000 })
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(document.querySelector('#selectTable'), xlsxParam)
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          this.fileName + '.xlsx'
        )
      } catch(e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  },
  created() {
    this.getTableList()
  }
}
</script>

<style scoped>
  .el-row{
    margin-bottom: 20px;
  }
</style>
